<template>
  <div>
    <div class="success">
      <img src="https://img.wifenxiao.com/h5-wfx/images/success3.png" alt="">
      <span class="msg">支付成功</span>
    </div>
    <ul class="pay_success">
      <li>
        <div class="left">订单编号：</div>
        <div class="right">{{order_info.order_no}}</div>
      </li>
      <li>
        <div class="left">付款时间：</div>
        <div class="right">{{order_info.create_time}}</div>
      </li>
    </ul>
    <!-- 按钮 -->
    <div class="button">
      <div v-if="resData.is_tuan == 1">
        <van-button @click="JumpName('groupDetail',{id:resData.id})" v-if="resData.is_mmxx_wuxian_dz == 1" class="btn red-btn" round block>{{resData.dz_mmxx_grouporder_name}}成功，邀请朋友参与{{resData.dz_mmxx_grouporder_name}}</van-button>         
        <van-button @click="JumpName('groupDetail',{id:resData.id})" v-else class="btn red-btn" round block>拼团成功</van-button>
      </div>
      <!--   定制十人团 订单详情     -->
      <div v-else-if="istendz">
        <van-button @click="Jump('order-detail',{id:resData.id,page:1})" class="btn" color="#F20B22" round plain hairline>订单详情</van-button>
      </div>
      <div v-else>
        <van-button @click="JumpName('groupDetail',{id:resData.id})" v-if="resData.need_all_sku == 1" class="btn" color="#F20B22" round plain hairline >邀请好友买齐所有规格一起{{resData.is_mmxx_wuxian_dz == 1? resData.dz_mmxx_grouporder_name:'拼团'}}</van-button>
        <van-button @click="JumpName('groupDetail',{id:resData.id})" v-else class="btn" color="#F20B22" round plain hairline >还需{{resData.type==2?'购买':'邀请'}}{{resData.group_left}}{{resData.type==2?'件':'人'}}一起{{resData.is_mmxx_wuxian_dz == 1? resData.dz_mmxx_grouporder_name:'拼团'}}</van-button>
      </div>
      <van-button @click="JumpName('groupDetail',{id:resData.id,payOrder:2})" class="btn" color="#F20B22" round plain hairline >{{resData.is_mmxx_wuxian_dz==1?resData.dz_mmxx_grouporder_name:'拼团'}}详情</van-button>
    </div>
  </div>
</template>

<script>
import { groupSuccess } from '@/api/public/index.js'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      resData: {},
      order_info: {},
      istendz: false
    }
  },
  created() {
    this.init()
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },
  methods: {
    init() {
      const data = {}
      data.id = this.$route.query.id
      if (this.$route.query.payOrder) {
        data.payOrder = this.$route.query.payOrder
      }
      groupSuccess(data).then(res => {
        if (res.status == 1) {
          this.resData = res.data
          this.order_info = this.resData.order_info
          //  十人团定制
          if (this.resData.aggregation_type && this.resData.aggregation_type == 6) {
            this.istendz = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
@import 'src/styles/publicSuccess/index';
</style>